<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息管理</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#stu" data-toggle="tab">学生信息管理</a></li>
    <li><a href="#teacher" data-toggle="tab" onclick="loadTeacherTable()">教师信息管理</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">课程与选课管理
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#course" tabindex="-1" data-toggle="tab">课程成绩管理</a></li>
            <li><a href="#selectCourse" tabindex="-1" data-toggle="tab" onclick="loadSCTable()">选课信息管理</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="stu">
        <div class="container-fluid">
            <h1 class="text-center">学生表</h1>
            <!-- Button trigger modal -->
            <form class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchName" placeholder="Input Name" name="searchName">
                </div>
                <button type="button" class="btn btn-default btn-primary" onclick="searchStudent()">Query</button>
                <button type="button" class="btn btn-primary btn-primary" data-toggle="modal" data-target="#myModal"
                        onclick="preAdd();">
                    新增学生
                </button>
                <form action="/logout">
                    <button type="submit" class="btn btn-success">Logout</button>
                </form>
            </form>
            <table class="table table-bordered" id="stuTable">

            </table>


        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">学生信息</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formStudent">
                            <input hidden="hidden" id="id" name="id"/>
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Insert name">
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select class="form-control" id="sex" name="sex">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="num">学号</label>
                                <input type="text" class="form-control" id="num" name="num" placeholder="Insert num">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--第一模块结束-->
    <div class="tab-pane fade" id="teacher">

        <div class="container-fluid">
            <h1 class="text-center">教师表</h1>
            <form class="form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchTeacherName" placeholder="Input Name" name="searchTeacherName">
                </div>
                <button type="button" class="btn btn-default btn-primary" onclick="searchTeacher()">Query</button>
                <button type="button" class="btn btn-primary btn-primary" data-toggle="modal" data-target="#myTeacherModal"
                        onclick="preAddTeacher();">
                    新增教师
                </button>
                <form action="/logout">
                    <button type="submit" class="btn btn-success">Logout</button>
                </form>
            </form>
            <table class="table table-bordered" id="teacherTable">

            </table>

            <div class="modal fade" tabindex="-1" role="dialog" id="myTeacherModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">教师信息</h4>
                        </div>
                        <div class="modal-body">
                            <form id="formTeacher">
                                <input hidden="hidden" id="idTeacher" name="idTeacher"/>
                                <div class="form-group">
                                    <label for="teacherName">姓名</label>
                                    <input type="text" class="form-control" id="teacherName" name="teacherName" placeholder="Insert name">
                                </div>
                                <div class="form-group">
                                    <label for="teacherPassword">Password</label>
                                    <input type="password" class="form-control" id="teacherPassword" name="teacherPassword"
                                           placeholder="Password">
                                </div>
                                <div class="form-group">
                                    <label for="teacherSex">性别</label>
                                    <select class="form-control" id="teacherSex" name="teacherSex">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="tid">工号</label>
                                    <input type="text" class="form-control" id="tid" name="tid" placeholder="Insert num">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="saveTeacher()">保存</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--第二模块结束-->
    <div class="tab-pane fade" id="course">
        <p>时间不够，资源暂无，sorry啦</p>
    </div>
    <!--第三模块结束-->
    <div class="tab-pane fade" id="selectCourse">

        <div class="container-fluid">
            <!--显示栏-->
            <h1 class="text-center">选课信息</h1>
            <div class="btn-group" role="group">
                <form action="/logout">
                    <button type="submit" class="btn btn-success">Logout</button>
                    <div class="form-group">
                        <input type="text" class="form-control" id="searchSid" placeholder="Input sid" name="searchSid">
                        <input type="text" class="form-control" id="searchCid" placeholder="Input cid" name="searchCid">
                    </div>
                    <button type="button" class="btn btn-default btn-primary" onclick="searchSC()">Query</button>
                    <button type="button" class="btn btn-primary btn-primary" data-toggle="modal" data-target="#mySCModal">
                        新增选课记录
                    </button>
                </form>
            </div>

            <div class="modal fade" tabindex="-1" role="dialog" id="mySCModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title">学生选课信息录入</h4>
                        </div>
                        <div class="modal-body">
                            <form id="formSC">
                                <input hidden="hidden" id="idSC" name="idSC"/>
                                <div class="form-group">
                                    <label for="insertSid">sid</label>
                                    <input type="text" class="form-control" id="insertSid" name="insertSid"
                                           placeholder="Insert sid">
                                </div>
                                <div class="form-group">
                                    <label for="insertCid">cid</label>
                                    <input type="text" class="form-control" id="insertCid" name="insertCid"
                                           placeholder="Insert cid">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="addSC()">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <table class="table table-hover">
                <thead id="scThead">
                </thead>
                <tbody id="scTb">
                </tbody>
            </table>

        </div>

    </div>
    <!--第四模块结束-->
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">

    function preAdd() {
        $("#id").val(0);//表示新增
    }

    function preAddTeacher() {
        $("#idTeacher").val(0);
    }

    function editStudent(id) {
        $('#myModal').modal('show')
        $.ajax({
            url: '/webapi/student/get/' + id
        }).done(function (rs) {
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#num").val(rs.num);
        })
    }

    function editTeacher(id) {
        $('#myTeacherModal').modal('show')
        $.ajax({
            url: '/webapi/teacher/getbytid/' + id
        }).done(function (rs) {
            $("#tid").val(rs.tid);
            $("#teacherName").val(rs.name);
            $("#teacherPassword").val("");
            $("#teacherSex").val(rs.sex);
        })
    }

    function saveStudent() {
        var data = $("#formStudent").serialize();
        var id = $("#id").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadStudentTable();
                $('#myModal').modal('hide')
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/student/update",
                method: "put",
                data: data
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadStudentTable();
                $('#myModal').modal('hide')
            })
        }
    }

    function saveTeacher() {
        var data = {
            tid:$("#tid").val().toString(),
            name:$("#teacherName").val().toString(),
            password:$("#teacherPassword").val().toString(),
            sex:$("#teacherSex").val().toString()
        };
        var id = $("#idTeacher").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/teacher/insert",
                method: "post",
                data: data
            }).done(function () {
                $("#teacherTable").bootstrapTable("destroy");
                loadTeacherTable();
                $('#myTeacherModal').modal('hide')
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/teacher/update",
                method: "put",
                data: data
            }).done(function () {
                $("#teacherTable").bootstrapTable("destroy");
                loadTeacherTable();
                $('#myTeacherModal').modal('hide')
            })
        }
    }

    function deleteStudent(id) {
        if (confirm("您确定要删除吗？")) {
            $.ajax({
                url: "/webapi/student/delete/" + id,
                method: "delete"
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadStudentTable();
            });
        }//end if
    }

    function deleteTeacher(id) {
        if (confirm("您确定要删除吗？")) {
            $.ajax({
                url: "/webapi/teacher/delete/" + id,
                method: "delete"
            }).done(function () {
                $("#teacherTable").bootstrapTable("destroy");
                loadTeacherTable();
            });
        }//end if
    }

    function searchStudent() {
        $("#stuTable").bootstrapTable("destroy");
        loadStudentTable();
    }

    function searchTeacher() {
        $("#teacherTable").bootstrapTable("destroy");
        loadTeacherTable();
    }

    function btnStudent() {
        let html = '<button href="#" class="btn btn-warning" id="edit" data-toggle="modal" data-target="#editinfo" ' +
            'style="margin-left:15px" title="修改用户">' +
            '<span class="glyphicon glyphicon-info-sign"></span></button>' +
            '<button href="#" class="btn btn-danger" id="delete" data-toggle="modal" data-target="#deleteuser" ' +
            'style="margin-left:15px" title="删除用户">' +
            '<span class="glyphicon glyphicon-trash"></span></button>'
        return html
    }

    function btnTeacher() {
        let html = '<button href="#" class="btn btn-warning" id="editTeacher" data-toggle="modal" data-target="#editinfo" ' +
            'style="margin-left:15px" title="修改用户">' +
            '<span class="glyphicon glyphicon-info-sign"></span></button>' +
            '<button href="#" class="btn btn-danger" id="deleteTeacher" data-toggle="modal" data-target="#deleteuser" ' +
            'style="margin-left:15px" title="删除用户">' +
            '<span class="glyphicon glyphicon-trash"></span></button>'
        return html
    }

    function loadStudentTable() {

        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            pagination: true,//设置为true底部显示分页条
            _withStripped: true,
            singleSelect: false,
            pageSize: 3,//每页数据条数
            pageNumber: 1,//页码
            sidePagination: "server",
            queryParams: function (params) {
                var paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "id",
                    direct: "desc",
                    name: $("#searchName").val()
                };
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'name',
                title: '姓名',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'sex',
                title: '性别',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'num',
                title: '学号',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                title: '操作',
                align: "center",
                halign: "center",
                valign: 'middle',
                formatter: btnStudent,
                events:
                    {
                        'click #edit': function (e, value, row, index) {
                            editStudent(row.id);
                        },
                        'click #delete': function (e, value, row, index) {
                            deleteStudent(row.id);
                        }
                    }
            }],
            responseHandler: function (res) {//使用responsHandler方法来转换数据格式
                return {
                    "total": res.data.total,//总数据
                    "rows": res.data.content//数据!!!!!此处不能写res.data.content因为该处我返回的是pageUtils的对象，若为page对象可以用content
                };
            }
        })
    }

    function loadTeacherTable() {

        $('#teacherTable').bootstrapTable({
            url: '/webapi/teacher/getbypage',
            pagination: true,//设置为true底部显示分页条
            _withStripped: true,
            singleSelect: false,
            pageSize: 3,//每页数据条数
            pageNumber: 1,//页码
            sidePagination: "server",
            queryParams: function (params) {
                var paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "tid",
                    direct: "desc",
                    name: $("#searchTeacherName").val()
                };
                return paraObj;
            },
            columns: [{
                field: 'tid',
                title: '工号',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'name',
                title: '姓名',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'sex',
                title: '性别',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                title: '操作',
                align: "center",
                halign: "center",
                valign: 'middle',
                formatter: btnTeacher,
                events:
                    {
                        'click #editTeacher': function (e, value, row, index) {
                            editTeacher(row.tid);
                        },
                        'click #deleteTeacher': function (e, value, row, index) {
                            deleteTeacher(row.tid);
                        }
                    }
            }],
            responseHandler: function (res) {//使用responsHandler方法来转换数据格式
                return {
                    "total": res.data.total,//总数据
                    "rows": res.data.content//数据!!!!!此处不能写res.data.content因为该处我返回的是pageUtils的对象，若为page对象可以用content
                };
            }
        })
    }

    function loadSCTable() {
        $.ajax({
            url: '/webapi/sc/getAll',//调用后端方法查询本期已选课程
            method:'get'
        }).done(function (rs) {
            var len = rs.data.length;
            var html1 = "<tr>"
                +"<th>" + "CID" + "</th>"
                +"<th>"+ "SID" + "</th>"
                +"</tr>";
            var html2="";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                html2 += "<tr>"
                    + "<td>" + item.scid.cid1 + "</td>"
                    + "<td>" + item.scid.sid + "</td>"
                    + "<td><a href='#' onclick='deleteSC(" + item.scid.cid1+","+item.scid.sid + ");'>Withdrawal this course</a></td>"
                    + "</tr>";
            }
            $("#scThead").html(html1);
            $("#scTb").html(html2);
        })
    }

    function deleteSC(cid1,sid){
        var Data = {
            CID:cid1.toString(),
            SID:sid.toString()
        }
        $.ajax({
            url:'/webapi/sc/delete',
            data:Data,
            method:"delete"
        }).done(function (rs) {
            loadSCTable();
        })
    }

    function addSC(){
        var Data = {
            SID:$("#insertSid").val().toString(),
            CID:$("#insertCid").val().toString()
        }
        $.ajax({
            url:'/webapi/sc/insert',
            data:Data,
            method:'post'
        }).done(function (rs) {
            $("#scTb").bootstrapTable("destroy");
            loadSCTable();
            $('#mySCModal').modal('hide')
        })
    }

    function searchSC() {
        var Data = {
            SID:$("#searchSid").val().toString(),
            CID:$("#searchCid").val().toString()
        }
        $.ajax({
            url:'/webapi/sc/querybyscid',
            data:Data,
            method:'get'
        }).done(function (rs) {
            var html2="";
                var item = rs.data;
                html2 += "<tr>"
                    + "<td>" + item.scid.cid1 + "</td>"
                    + "<td>" + item.scid.sid + "</td>"
                    + "<td><a href='#' onclick='deleteSC(" + item.scid.cid1+","+item.scid.sid + ");'>Withdrawal this course</a></td>"
                    + "</tr>";
            $("#scTb").html(html2);
        })
    }

    $(function () {
        loadStudentTable();
    });

</script>
</body>
</html>